<template>
  <div>
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="index">
          <div class="panel-heading">
            <img src="http://placeimg.com/200/200/scenery">
            <span class="title">
              <p class="role">{{userInfo.username}}</p>
              <!--{{userInfo}}-->
              <span class="name">超级管理员</span>
            </span>
            <i class="el-icon-edit-outline" style="font-size: 28px; position: absolute; right: 31px; cursor: pointer;"></i>
          </div>
          <div class="panel-body">
            <ul>
              <li>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <i class="fa fa-id-card"></i>
                  </el-col>
                  <el-col :span="12">ID</el-col>
                  <el-col :span="6">{{userInfo.id}}</el-col>
                </el-row>
              </li>
              <li>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <i class="fa fa-venus-mars"></i>
                  </el-col>
                  <el-col :span="12">性别</el-col>
                  <el-col :span="6">{{userInfo.gender=='m'?'男':'女'}}</el-col>
                </el-row>
              </li>
              <li>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <i class="fa fa-envelope"></i>
                  </el-col>
                  <el-col :span="12">EMAIL</el-col>
                  <el-col :span="6">{{userInfo.email}}</el-col>
                </el-row>
              </li>
              <li>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <i class="fa fa-phone"></i>
                  </el-col>
                  <el-col :span="12">手机</el-col>
                  <el-col :span="6">{{userInfo.phone}}</el-col>
                </el-row>
              </li>
              <li>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <i class="fa fa-calendar"></i>
                  </el-col>
                  <el-col :span="12">注册时间</el-col>
                  <el-col :span="6">{{formatCtime}}</el-col>
                </el-row>
              </li>
              <li>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <i class="fa fa-calendar-check-o"></i>
                  </el-col>
                  <el-col :span="12">更新时间</el-col>
                  <el-col :span="6">{{formatMtime}}</el-col>
                </el-row>
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="头像修改" name="second">
          <CircleMenus></CircleMenus>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment'
import CircleMenus from './circleMenus.vue'
export default {
  data() {
    return {
      activeName: 'index'
    }
  },
  components: {
      CircleMenus
    },
  computed: {
    userInfo() {
      return this.store.get('userInfo')
    },
    formatCtime() {
      return moment(this.userInfo.ctime).format('YYYY-MM-DD HH-mm-ss')
    },
    formatMtime() {
      return moment(this.userInfo.mtime).format('YYYY-MM-DD HH-mm-ss')
    }
  },
  methods: {

  },
  mounted: function() {

  }
}
</script>
<style lang="less">
.box-card {
  border-radius: 0;
  .panel-heading {
    display: flex;
    text-align: left;
    width: 100%;
    border-bottom: 1px solid #eeeff1;
    padding: 15px;
    font-weight: bold;
    img {
      margin-right: 15px;
      width: 90px;
      height: 90px;
      border-radius: 50%;
    }
    .title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .name {
        color: #367fa9;
        font-size: 18px;
      }
      .role {
        color: #99a9c0;
      }
    }
  }
  .panel-body {
    color: #3c8dbc;
    ul {
      li {
        border-bottom: 1px solid #eeeff1;
        padding: 0 15px;
        height: 45px;
        line-height: 45px;
      }
    }
  }
}
</style>